<template>
  <LayoutContent>
    <div class="button">
      <el-button type="primary" size="small" @click="handleClick('add')">新增学生</el-button>
      <el-button type="primary" size="small" @click="handleClick('batch')">批量新增学生</el-button>
      <!-- <el-button type="primary" size="small" @click="handleClick('导入')">导入excel</el-button> -->
      <BasicExcel action="/api/excel/student" />
    </div>
    <!-- 搜索条件 -->
    <div class="form">
      <el-form :inline="true" :model="form">
        <el-form-item label="姓名:">
          <el-input v-model="form.studentName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="专业:">
          <el-input v-model="form.majorName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="班级:" v-if="!isTea">
          <el-input v-model="form.className" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="届时:">
          <el-input v-model="form.year" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="handleClick('select')">搜索</el-button>
          <el-button type="primary" size="small" @click="handleClick('rest')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格 -->
    <BasicTable :columns="columns" border :tableData="tableData" :page="page" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
      <template #gender="{ row }">
        <BasicTab
          :codeList="[
            { title: '男', type: 'primary', state: 1 },
            { title: '女', type: 'info', state: 0 },
          ]"
          :state="row.gender"
        />
      </template>
      <template #operation="{ row }">
        <el-button link type="primary" size="small" @click="handleClick('detail', row.id)">详情</el-button>
        <el-button link type="primary" size="small" @click="handleClick('update', row.id)" v-if="!isTea">修改</el-button>
        <el-button link type="primary" size="small" @click="handleClick('delete', row.id)">删除</el-button>
      </template>
    </BasicTable>
  </LayoutContent>
</template>

<script setup>
import { getListApi, deleteApi } from '@/api/student/index'
import { ref, onMounted, inject } from 'vue'
import { useRouter } from 'vue-router'

const isTea = inject('isTea')

// 搜索条件
const form = ref({
  studentName: '',
  majorName: '',
  className: '',
  year: '',
})

// 表格
const tableData = ref([])
const columns = [
  {
    prop: 'index',
    label: '序号',
  },
  {
    prop: 'id',
    label: '学号',
  },
  {
    prop: 'name',
    label: '姓名',
  },
  {
    prop: 'year',
    label: '届时',
  },
  {
    prop: 'majorName',
    label: '专业',
  },
  {
    prop: 'className',
    label: '班级',
    hide: isTea.value,
  },
  {
    prop: 'gender',
    label: '性别',
  },
  {
    prop: 'age',
    label: '年龄',
    sort: true,
  },
  {
    prop: 'phone',
    label: '手机号',
  },
  {
    prop: 'email',
    label: '邮箱',
  },
  {
    prop: 'createTime',
    sort: true,
    label: '创建时间',
  },
  {
    prop: 'updateTime',
    sort: true,
    label: '更新时间',
  },
  {
    prop: 'operation',
    label: '操作',
    width: 200,
  },
]

const page = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
})

const getList = async () => {
  const res = await getListApi({ ...page.value, ...form.value })
  if (res.code == 200) {
    tableData.value = res.data.records
    page.value.total = res.data.total
  } else {
    ElMessage.error(res.msg)
  }
}

onMounted(() => {
  getList()
})
const handleCurrentChange = (value) => {
  page.value.currentPage = value
  getList()
}
const handleSizeChange = (value) => {
  page.value.pageSize = value
  getList()
}

const router = useRouter()
const handleClick = (type, id) => {
  switch (type) {
    case 'delete': // 删除
      deleteData(id)
      break
    case 'detail': // 详情
      router.push({ path: '/student/detail', query: { id } })
      break
    case 'select': // 查询
      selectData()
      break
    case 'add': // 新增
      router.push({ path: '/student/add' })
      break
    case 'update': // 修改
      router.push({ path: '/student/add', query: { id } })
      break
    case 'batch': // 批量新增
      router.push({ path: '/student/batch', query: { id } })
      break
    case '导入':
      break
    case 'rest': // 重置
      restForm()
      break
  }
}

// 删除
const deleteData = async (id) => {
  const res = await deleteApi({ id })
  if (res.code == 200) {
    getList()
    ElMessage.success(res.msg)
  } else {
    ElMessage.error(res.msg)
  }
}

// 搜索
const selectData = () => {
  getList()
}

// 重置搜索
const restForm = () => {
  form.value = { studentName: '', majorName: '', className: '', year: '' }
  page.value = { currentPage: 1, pageSize: 10 }
  getList()
}
</script>

<style scoped lang="scss">
.button {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}
:deep(.el-form-item__content) {
  min-width: 200px;
}
</style>
